<template>
  <div>
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
      <a-row type="flex">
        <a-col :span="12">
          <fTitle :tit="'基础信息'" style="margin-top: 0" />
          <a-form-item label="职位名称">
            <a-input v-decorator="['postName']" disabled placeholder="请输入职位名称" />
          </a-form-item>
          <a-form-item label="招工企业">
            <a-select v-decorator="['companyUnitId']" disabled placeholder="选择招工企业" @change="onCompanyChange">
              <a-select-option :value="item.id" v-for="item in companyIdArr" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="岗位招聘负责人员">
            <a-select v-decorator="['contactUserId']" :options="adminUsers" disabled placeholder="请选择负责人员" style="width: 100%" />
          </a-form-item>
          <a-form-item label="岗位联系电话">
            <a-input v-decorator="['phone']" disabled placeholder="请输入联系电话" />
          </a-form-item>
          <a-form-item label="职位类型">
            <a-cascader
              v-decorator="['positionType']"
              disabled
              :options="positionTypes"
              :fieldNames="{ label: 'name', value: 'id', children: 'childList' }"
              placeholder="请选择职位类型"
            />
          </a-form-item>
          <a-form-item label="学历经验">
            <a-select disabled v-decorator="['workingSeniority']" placeholder="选择经验" style="width: 49%; margin-right: 2%">
              <a-select-option :value="item.id" v-for="item in workingSeniorityArr" :key="item.id">
                {{ item.v }}
              </a-select-option>
            </a-select>
            <a-select disabled v-decorator="['lowestEducation']" placeholder="选择学历" style="width: 49%">
              <a-select-option :value="item.id" v-for="item in lowestEducationArr" :key="item.id">
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="工作城市">
            <a-cascader v-decorator="['cityName']" :options="common.cityList" disabled placeholder="请选择工作城市" style="width: 100%" />
          </a-form-item>
          <a-form-item label="具体工作地点">
            <a-input disabled placeholder="请输入工作地点" v-decorator="['detailedAddress']" />
          </a-form-item>
          <a-form-item label="是否急招">
            <a-radio-group disabled v-decorator="['isEmergency', { initialValue: false }]">
              <a-radio :value="item.id" v-for="item in isEmergencyArr" :key="item.id">
                {{ item.v }}
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="工作性质">
            <a-radio-group disabled v-decorator="['workType', { initialValue: 1 }]">
              <a-radio :value="item.id" v-for="item in workTypeArr" :key="item.id">
                {{ item.v }}
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="职位描述">
            <a-textarea disabled placeholder="请输入职位描述" :auto-size="{ minRows: 8, maxRows: 15 }" v-decorator="['postDescribe']" />
          </a-form-item>
          <a-form-item label="招聘类型">
            <a-radio-group disabled v-decorator="['recruitType']">
              <a-radio :value="1" key="cqzp">长期招聘</a-radio>
              <a-radio :value="2" key="zmjt">招满即停</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-if="dataJson.recruitType === 2" label="招聘人数">
            <a-input-number disabled style="width: 100%" v-decorator="['number']" />
          </a-form-item>
          <fTitle :tit="'薪资及福利'" style="margin-top: 48px" />
          <a-form-item label="薪资范围" style="margin-bottom: 0">
            <a-input-number v-show="false" disabled v-decorator="['lowestSalary1', { rules: [{ required: true, message: '' }] }]" />
            <a-form-item style="display: inline-block; width: 30%; margin-right: 2%">
              <a-input-number
                disabled
                :max="this.form.getFieldValue('highestSalary') || 0"
                v-decorator="['lowestSalary', { rules: [{ required: true, message: '薪资范围请正确输入薪资' }] }]"
              />
            </a-form-item>
            <a-form-item style="display: inline-block; width: 30%">
              <a-input-number
                disabled
                :min="this.form.getFieldValue('lowestSalary') || 0"
                v-decorator="['highestSalary', { rules: [{ required: true, message: '薪资范围请正确输入薪资' }] }]"
              />
            </a-form-item>
            <span style="display: inline-block; width: 6%; text-align: center"> x </span>
            <a-form-item style="display: inline-block; width: 32%">
              <a-select disabled v-decorator="['salaryGrantType', { initialValue: 1 }]" placeholder="选择月份">
                <a-select-option :value="item.id" v-for="item in monthlySalaryArr" :key="item.id">
                  {{ item.v }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-form-item>
          <a-form-item label="发薪日">
            <a-select disabled v-decorator="['payday', { initialValue: 1 }]" placeholder="选择月份">
              <a-select-option :value="item" v-for="item in 30" :key="item">
                {{ item }}
              </a-select-option>
              <a-select-option :value="item.val" v-for="item in paydayArr" :key="item.val">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="福利待遇">
            <a-select disabled :maxTagCount="3" mode="tags" style="width: 100%" placeholder="请选择福利" v-model="highlights"> </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <fTitle :tit="'办公环境'" style="margin-top: 0" />
          <a-form-item label="">
            <a-upload
              list-type="picture-card"
              action="/file/api/v1/general/uploadImg"
              name="files"
              :file-list="fileList"
              @preview="handlePreview"
              class="umsg"
            >
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
              <div class="mt20"></div>
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </a-form-item>
          <fTitle :tit="'视频封面'" />
          <a-form-item label="">
            <a-upload
              list-type="picture-card"
              action="/file/api/v1/general/uploadImg"
              name="files"
              :file-list="video"
              @preview="handlePreview"
              class="umsg"
            >
            </a-upload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import moment from "moment";
import { getCompanyUnits } from "../../api";
import { mapState } from "vuex";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
const workTypeArr = [
  { id: 1, v: "全职" },
  { id: 2, v: "兼职" }
];
const workingSeniorityArr = [
  { id: 1, v: "不限" },
  { id: 2, v: "应届生" },
  { id: 3, v: "1-3年" },
  { id: 4, v: "3-5年" },
  { id: 5, v: "5-10年" },
  { id: 6, v: "10年以上" }
];
const lowestEducationArr = [
  { id: 1, v: "初中" },
  { id: 4, v: "高中" },
  { id: 2, v: "中专" },
  { id: 3, v: "大专" },
  { id: 5, v: "本科" },
  { id: 6, v: "硕士" },
  { id: 7, v: "博士" },
  { id: 8, v: "其他" }
];
const monthlySalaryArr = [
  { id: 3, v: "年" },
  { id: 2, v: "月" },
  { id: 1, v: "日" },
  { id: 0, v: "小时" }
];
const isEmergencyArr = [
  { id: true, v: "是" },
  { id: false, v: "否" }
];
const paydayArr = [
  { name: "月初", val: -1 },
  { name: "月中", val: -2 },
  { name: "月底", val: -3 }
];

import fTitle from "../../../component/fTitle";
export default {
  components: {
    fTitle
  },
  props: {
    dataJson: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState(["recruitment", "common"]),
    adminUsers() {
      return this.recruitment.adminUsers;
    },
    positionTypes() {
      return this.recruitment.positionTypes;
    },
    citySourceMap() {
      return this.common.citySourceMap;
    }
  },
  watch: {
    dataJson(v) {
      if (v) {
        this.fileList = [];
        this.video = [];
        if (this.dataJson.video) {
          const arr = this.dataJson.videoCover.split(",");
          arr.forEach((e) => {
            if (e) {
              const img = e.split("|name|");
              this.video.push({
                uid: img[0],
                name: img[0],
                status: "done",
                url: img[0]
              });
            }
          });
        }
        if (this.dataJson.officeEnvironment) {
          const arr = this.dataJson.officeEnvironment.split(",");
          arr.forEach((e) => {
            this.fileList.push({
              uid: e,
              name: e,
              status: "done",
              url: e
            });
          });
        }

        setTimeout(() => {
          this.form.setFieldsValue({
            postName: this.dataJson.postName,
            postDescribe: this.dataJson.postDescribe,
            workType: this.dataJson.workType,
            workingSeniority: this.dataJson.workingSeniority,
            lowestEducation: this.dataJson.lowestEducation,
            number: this.dataJson.number,
            companyUnitId: this.dataJson.companyUnitName,
            highestSalary: this.dataJson.highestSalary,
            lowestSalary: this.dataJson.lowestSalary,
            monthlySalary: this.dataJson.monthlySalary,
            payday: this.dataJson.payday,
            salaryGrantType: this.dataJson.salaryGrantType,
            isEmergency: this.dataJson.isEmergency,
            contactUserId: this.dataJson.contactName,
            phone: this.dataJson.phone,
            recruitType: this.dataJson.recruitType,
            positionType: this.dataJson.positionType ? this.dataJson.positionType.split(",") : undefined,
            cityName: this.initCityName(this.dataJson.cityName),
            detailedAddress: this.dataJson.detailedAddress
          });
          this.highlights = this.dataJson.highlights.length > 0 ? this.dataJson.highlights.split(",") : [];
        }, 100);
      }
    }
  },
  data() {
    return {
      paydayArr,
      isEmergencyArr,
      previewImage: "",
      previewVisible: false,
      previewVisibleV: false,
      form: this.$form.createForm(this, {}),
      officeEnvironment: [],
      fileList: [],
      workTypeArr,
      lowestEducationArr,
      workingSeniorityArr,
      monthlySalaryArr,
      companyIdArr: [],
      highlights: [],
      video: []
    };
  },
  created() {
    this.onGetCompanyUnits();
  },
  methods: {
    moment,
    initCityName(initVal) {
      if (!initVal) {
        return undefined;
      }
      const cityArr = initVal.split(",");
      if (cityArr.length > 0) {
        const id1 = parseInt(cityArr[0]);
        const item = this.citySourceMap[id1];
        if (item.parentId > 0) {
          return [item.parentId, id1];
        } else {
          return [id1];
        }
      } else {
        return undefined;
      }
    },
    onCompanyChange(p1, p2, p3) {
      console.log(p1, p2, p3);
    },
    async onGetCompanyUnits() {
      try {
        const { data } = await getCompanyUnits({
          pageNo: 1,
          pageSize: 1000
        });
        this.companyIdArr = data.entities;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.umsg {
  ::v-deep .anticon-delete {
    display: none;
  }
}
</style>
